<template>
	<div class="pages">
		<div class="card">
			<van-steps v-if="state.lists.length" direction="vertical" :active="state.active" active-color="#4674C9">
				<van-step v-for="(item, idx) in state.lists" :key="idx">
					<template v-slot:active-icon>
						<div class="circle active"></div>
					</template>
					<template v-slot:inactive-icon>
						<div class="circle"></div>
					</template>
					<template v-slot:default>
						<div class="title" v-text="formatType(item.approvalStatus)"></div>
						<div class="text" v-text="`部门：${item.approvalOrgName || '暂无部门'}`"></div>
						<div class="text" v-text="`人员：${item.approvalUserName || '暂无人员'}`"></div>
						<div class="text" v-if="item.approvalTime" v-text="`时间：${item.approvalTime || '暂无时间'}`"></div>
					</template>
				</van-step>
			</van-steps>
			<div v-else>暂无时间线</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { reactive, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { taskApprovalTime } from '@/api/taskpreview' 

const route = useRoute();

const state = reactive({
	active: 0,
	lists: [] as any
})

const initProcess = async (taskId: string) => {
	const res = await taskApprovalTime({ id: taskId })
	const data = res.data
	state.lists = data
	// 判断流程到第几步
	const index = state.lists.findIndex((item: any) => {
		if(item) return item.approvalStatus == '0'
	})

	if(index != -1) {
		state.active = index
	}else {
		state.active = state.lists.length - 1
	}
}

const formatType = (type: string) => {
	switch(type) {
		case '0':
			return '创建'
		case '1':
			return '审批'
		case '2':
			return '发送'
		case '3':
			return '接收'
		case '4':
			return '办理'
		case '5':
			return '转发'
		default:
			return type || '未知类型'
	}
}

onMounted(() => {
	initProcess(route.query.taskId as string)
})
</script>
<style lang="scss" scoped>
.pages {
	display: flex;
	flex-direction: column;
	// overflow-y: scroll;
	box-sizing: border-box;
	padding: 12px;

	.card {
		background: #ffffff;
		border-radius: 5px;
		box-shadow: 0.5px 0.87px 4.5px 1px rgba(0,0,0,0.05);
		box-sizing: border-box;
		padding: 12px;

		.title {
			font-size: 14px;
			font-weight: bold;
			text-align: left;
			color: #181818;
			margin-bottom: 8px;
		}

		.text {
			font-size: 10px;
			font-weight: bold;
			text-align: left;
			color: #646464;
			margin-bottom: 6px;
		}

		.circle {
			width: 5px;
			height: 5px;
			border-radius: 50%;
			background-color: #ffffff;
			border: 3px solid #ECECEC;
		}
		.active {
			border-color: $primary-color !important;
		}
	}
}
</style>